<template>
  <div class="excute-result-box">
    <el-tabs v-model="activeTab" class="tabs_button">
      <el-tab-pane label="Result" name="result">
        <ExcuteResult :result="excuteResult" :status="status" :innerMaxHeight="innerMaxHeight" />
      </el-tab-pane>
      <el-tab-pane label="Job Details" name="details">
        <ExcuteDetail :result="excuteResult" :jobId="jobId" :innerMaxHeight="innerMaxHeight" />
      </el-tab-pane>
      <el-tab-pane label="Log Message" name="logs">
        <LogMessage v-if="jobId" :isDemo="isDemo" :cellId="cellId" :currentNotebook="currentNotebook"
          :result="excuteResult" :status="status" :jobId="jobId" :innerMaxHeight="innerMaxHeight" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import { mapActions, mapMutations, mapState, mapGetters } from 'vuex'
import { JOB_STATUS, MarkdownTag } from '@/config'
import ExcuteResult from './ExcuteResult'
import ExcuteDetail from './ExcuteDetail'
import LogMessage from './LogMessage'

@Component({
  props: ['runResult'],
  components: {
    ExcuteResult,
    ExcuteDetail,
    LogMessage,
  },
  computed: {
  },
  methods: {
    ...mapActions({
      getJobStatus: 'GET_JOB_STATUS',
    }),
  }
})
export default class WorkflowExcute extends Vue {
  activeTab = 'details'
  excuteResult = {}
  status = 'NEW'
  innerMaxHeight = ''
  jobId = ''
  timer = null

  isDemo = false
  cellId = ''
  currentNotebook = {}

  async getStatus(id, progressStatus) {
    this.jobId = id
    if (this._isDestroyed) {
      return false
    }
    try {
      const res = await this.getJobStatus(id)
      if (this._isDestroyed) {
        return false
      }
      const { status, job_id } = res.result
      this.changeStatus(status, progressStatus)
      if (['1', '2', '3'].includes(status)) {
        this.activeTab = 'result'
      } else {
        this.pollingData(job_id, progressStatus)
      }
      this.excuteResult = res.result
    } catch (err) {
      if (this._isDestroyed) {
        return false
      }
      this.changeStatus('0')
      this.pollingData(this.jobId)
      this.excuteResult = err.data
    }
  }
  changeStatus(status, progressStatus) {
    this.status = JOB_STATUS[status]
    this.changeStatusA(this.status, progressStatus)
    // this.$emit('changeStatus', this.status, progressStatus)
  }
  changeStatusA(status, cell, progressStatus) {
    return
    // 运行结束 runningStatus 标志为对应的状态
    this.runningStatus = progressStatus || status
    if (status === 'ERROR' && this.excuteType) { // 避免上次执行失败 再刷新页面出提示
      this.$message.error(this.$t('notebook.runningError'))
    }
    let index = this.newCellList.findIndex(v => v.id === cell.id)
    this.newCellList[index].status = status
    if (cell.id === this.selectCell.id) {
      this.selectCellStatus = status
    }
    this.newCellList[index].loadingResult = false
    this.someIsRunning = this.newCellList.some(cell => cell.status === 'RUNNING')
    // 为了通知运行结束
    if (this.runningIndex === -1) {
      return
    }
    if (progressStatus) {
      this.changeRunAll(false)
      this.$message.success(this.$t('notebook.canceled'))
      return
    }
    if (status !== 'RUNNING' && status !== 'NEW' && this.isRunningAll) {
      if (status === 'ERROR' || status === 'DISCARDED') { // 运行失败停留在当前 cell, 停止运行
        this.changeRunAll(false)
        return
      } else {
        this.confirmRunAll()
      }
    } else if (status === 'NEW' && this.excuteType === 'stop') {
      this.confirmStopAll()
    }
  }
  pollingData(id) {
    window.clearTimeout(this.timer)
    if (this._isDestroyed) {
      return false
    }
    this.timer = setTimeout(() => {
      this.getStatus(id)
    }, 1000);
  }
  mounted() {
    this.getStatus(this.runResult)
  }
  beforeDestory() {
    window.clearTimeout(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.excute-result-box {
  max-height: 500px;
  overflow: auto;
  border: 1px solid $--line-border-color;
  background-color: $--color-nav;
}
</style>
